<template>
  <div class="container">
    <div class="table-list">
      <div class="table-container" v-if="showTable">
        <list-table-new ref="listTable" v-bind="tableConfig"></list-table-new>
      </div>
      <editAppPage
        v-show="!showTable"
        ref="editPage"
        :appId="appInfo.id"
        @goBackPage="goBackPage"
        @deleteOnce="deleteOnce"
        @addOrEdit="addOrEdit"
      />
    </div>
    <signature
      v-if="showSign"
      :showSignature.sync="showSign"
      :account="currentAccount"
      @doSign="signSucced"
    />
  </div>
</template>

<script>
import editAppPage from "./editAppPage.vue";
import {
  applicationQueryList,
  applicationMultiDelete,
  applicationEnableOrDeactivate,
} from "@/api/systemManagement/applicationManagement.js";
import signature from "@/components/signature.vue";
export default {
  components: { editAppPage, signature },
  data() {
    return {
      showSign: false,
      currentAccount: "",
      showTable: true,
      //表格数据配置
      tableConfig: {
        showIndex: true,
        selectionShow: true,
        pageConfig: {
          pageCode: "applicationManagement",
          userId: this.$store.getters.userInfo.namePy,
        },
        searchObj: {
          searchMethod: (params, sortStr) => {
            this.getTableData(params, sortStr);
          },
          searchArr: [
            {
              type: "input",
              label: "应用名称",
              model: "name",
              placeholder: "请输入",
            },
            {
              type: "select",
              label: "状态",
              model: "status",
              placeholder: "请选择",
              option: [
                { label: "启用", value: 1 },
                { label: "停用", value: 0 },
              ],
            },
          ],
          queryData: {
            page: 1,
            pageSize: 15,
          },
        },
        tableMethods: {
          rowClick: (row) => {
            this.goDetailPage(row);
          },
        },
        actionList: [
          {
            name: "新增",
            icon: "icon-xinjian",
            disabled: !this.$store.getters.isBtnAuth("add"),
            content: "未授权此功能！",
            method: () => {
              this.add();
              //this.goDetailPage({}, "/addUserPage");
            },
          },
          {
            name: "启用",
            icon: "icon-qiyong",
            disabled: !this.$store.getters.isBtnAuth("enable"),
            content: "未授权此功能！",
            method: () => {
              this.enableOrDeactivate(1);
            },
          },
          {
            name: "停用",
            icon: "icon-tingyong",
            disabled: !this.$store.getters.isBtnAuth("deactivate"),
            content: "未授权此功能！",
            method: () => {
              this.enableOrDeactivate(0);
            },
          },
        ],
        column: [
          {
            label: "应用名称",
            textAlign: "center",
            prop: "name",
          },
          {
            label: "数据源标识",
            textAlign: "center",
            prop: "mark",
          },
          {
            label: "集团组织",
            textAlign: "center",
            prop: "departmentName",
          },
          {
            label: "应用类型",
            textAlign: "center",
            prop: "type",
            formatter: (row) => {
              return this.$store.getters.fineDirtDataName(
                "system_app_type",
                row.type
              );
            },
          },
          {
            label: "签名方式",
            textAlign: "center",
            prop: "sign",
            formatter: (row) => {
              return this.$store.getters.fineDirtDataName(
                "system_sign",
                row.sign
              );
            },
          },
          {
            label: "应用状态",
            textAlign: "center",
            prop: "status",
            formatter: (row) => {
              return row.status === 1 ? "启用" : "停用";
            },
          },
        ],
        tableData: [],
        paginationObj: {
          pageSizes: [15, 30, 50, 100],
        },
        totalNumber: 0,
      },
      appInfo: {
        id: "",
      },
      currentRow: null,
    };
  },
  created() {},
  mounted() {
    this.$refs.listTable.getTableConfig();
    //this.$refs.listTable.searchData();
  },
  methods: {
    //登录验证结果
    signSucced(data) {
      this.appInfo = this.currentRow;
      this.showTable = false;
    },
    //跳转到详情页
    goDetailPage(row) {
      this.currentAccount = this.$store.getters.userInfo.account;
      this.showSign = true;
      this.currentRow = row;
    },
    //获取表格数据
    getTableData(params, sortStr) {
      let queryData = Object.assign({}, params);
      if (sortStr.length > 0) {
        queryData.orders = sortStr;
      }
      applicationQueryList(queryData).then(
        (res) => {
          if (res.code) {
            this.$set(this.tableConfig, "tableData", res.data);
            this.$set(this.tableConfig, "totalNumber", res.total);
          }
        },
        (error) => {
          this.$message.error(error);
        }
      );
    },
    add() {
      this.showTable = false;
      this.appInfo = {};
    },
    //启用应用
    enableOrDeactivate(status) {
      let arr = this.$refs.listTable.getSelectData();
      let ids = [];
      if (arr.length != 0) {
        arr.forEach((item) => {
          ids.push(item.id);
        });
        let params = {
          ids: ids.join(),
          status: status,
        };
        applicationEnableOrDeactivate(params).then(
          (res) => {
            if (res.code === 200) {
              this.$message.success(res.description);
              this.$refs.listTable.searchData();
            }
          },
          (error) => {
            this.$message.error(error);
          }
        );
      } else {
        this.$message.warning("请至少勾选一条数据");
      }
    },
    //删除单条数据
    deleteOnce() {
      this.showTable = true;
      this.$nextTick(() => {
        this.$refs.listTable.searchData();
      });
    },
    //新增或修改数据
    addOrEdit() {
      this.showTable = true;
      this.$nextTick(() => {
        this.$refs.listTable.searchData();
      });
    },
    goBackPage() {
      this.showTable = true;
    },
  },
};
</script>



<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  .table-list {
    height: calc(100% - 10px);
    width: 100%;
    padding: 20px;
    .table-container {
      width: 100%;
      height: calc(100% - 10px);
    }
  }
}
</style>